<template>
  <view class="dy-scroll-container">
    <dy-navbar title="线型进度条" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="基础用法" />
        <template slot="body">
          <view class="dy-flex-column dy-pd-24  dy-justify-between" style="height: 100px;">
            <dy-line-progress width="200" percent="40" />
            <dy-line-progress percent="50" />
            <dy-line-progress percent="60" :round="false" />
            <dy-line-progress height="30" percent="70" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="百分比显隐" />
        <template slot="body">
          <view class="dy-flex-column dy-pd-24  dy-justify-between" style="height: 100px;">
            <dy-line-progress width="200" percent="40" />
            <dy-line-progress percent="50" />
            <dy-line-progress percent="60" :round="false" :show-percent="false" />
            <dy-line-progress height="30" percent="70" :show-percent="false" />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="自定义颜色" />
        <template slot="body">
          <view class="dy-flex-column dy-pd-24  dy-justify-between" style="height: 100px;">
            <dy-line-progress width="200" percent="40" />
            <dy-line-progress active-color="red" percent="50" />
            <dy-line-progress
              inactive-color="black"
              percent="60"
              :round="false"
              :show-percent="false"
            />
            <dy-line-progress
              active-color="green"
              inactive-color="red"
              height="30"
              percent="70"
              :show-percent="false"
            />
          </view>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="条纹、动态效果" />
        <template slot="body">
          <view class="dy-flex-column dy-pd-24  dy-justify-between" style="height: 80px;">
            <dy-line-progress percent="100" striped />
            <dy-line-progress percent="100" striped striped-active />
            <dy-line-progress active-color="green" percent="100" striped striped-active />
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Search'
}
</script>
